import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import b from'./Hdl.module.css';  
import logo from '../../picture/tubiao.png'
import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const Hdl = () => {
  const nav=useNavigate();
const [inputValue1, setInputValue1] = useState('');
  const [inputValue2, setInputValue2] = useState('');
  const handleChange1 = (event) => {
    setInputValue1(event.target.value);
  };
  const handleChange2 = (event) => {
    setInputValue2(event.target.value);
  };
  const handleSubmit = (event) => {
    console.log('输入的值：', inputValue1, inputValue2);
    const postData = {
      username: inputValue1,
      password: inputValue2
    };
    axios({
      method: 'post',
      url: 'http://localhost:3001/hou/debark',
      data: postData,
      headers: {
        'Content-Type': "application/x-www-form-urlencoded", 
      }
    })
      .then(response => {
        console.log(response.msg);
        if (response.data.msg === '登录成功'){
          nav('/bigr');
        }
      })
      .catch(error => {
        console.error('There was an error!', error);
      });

  };


  return (
    <div className={b.aform_container}>
      <Form
        name="normal_login"
        className={b.alogin_form}
        initialValues={{ remember: true }}
        onFinish={handleSubmit}
      >
        <div className={b.aform_title}>
            <div className={b.alogo}>
                <img src={logo} alt="aLogo"/>
            </div>
            <div className={b.atitle}>佳肴绘卷</div>
            <div className={b.atitle1}>管理员登陆</div>
        </div>
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入您的用户名!' }]}
        >
          <Input prefix={<UserOutlined className={b.asite_form_item_icon}/>} placeholder="用户名"
            onChange={handleChange1}
            value={inputValue1} />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入您的密码!' }]}
        >
          <Input
            prefix={<LockOutlined className={b.asite_form_item_icon} />}
            type="password"
            placeholder="密码"
            onChange={handleChange2}
            value={inputValue2}
          />
        </Form.Item>
        <Form.Item className={b.aform_button_container}>
          <Button type="primary" htmlType="submit" className={b.alogin_form_button}>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Hdl;


